<!-- 
@author wsq
@date  2016-11-13 
@右侧导航条
-->
<template>
 	<div class="sideBar" v-on:touchmove.preventDefault='sideBar($event)'>
        <span v-for='(item,key) in companyList'  v-on:touchmove.self='move($event)' v-on:touchstart.self='sroll($event)' v-bind:data-ref='key' class="item">{{key}}</span>
  </div>
</template>
<script>
export default {
  name: 'sideBar',
  data () {
    return {}
  },
  props:['companyList'],
  methods:{
    sroll:function(event){
      event.stopPropagation();
      var el =document.getElementById(event.target.dataset.ref)
      el.scrollIntoView();
    },
    move:function(event){
      event.stopPropagation();
      var el =document.getElementById(event.target.dataset.ref)
      el.scrollIntoView();
    },
    sideBar:function(event){
      event.stopPropagation();
    }
  }
}
</script>

<style>
.sideBar .item{
	display: block;
	color: #4A90E2;
	text-align: center;
	padding:0.04rem 0;

}
[data-dpr="1"] .sideBar .item:first-child{
  font-size: 10px !important;
}
[data-dpr="2"] .sideBar .item:first-child{
  font-size: 20px !important;
}
[data-dpr="3"] .sideBar .item:first-child{
  font-size: 30px !important;
}
.sideBar {
  position: fixed;
  right: 0;
  top:1.44rem;
  bottom: 0;
  color: #4A90E2;
  padding-top: 27%;
  text-align: center;
  background-color: #fff;
  z-index: 100;
  min-width: 0.586667rem;
}

[data-dpr="1"] .sideBar .item {
	font-size: 12px;
}
[data-dpr="2"] .sideBar .item {
    font-size: 24px;
}
[data-dpr="3"] .sideBar .item {
    font-size: 36px;
}
	
</style>